<template>
	<b-layout-index>

		<navbar></navbar>

		<view class="bg-white pd-top-10">
			<u-tabs lineWidth="20" lineHeight="3" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
				fontSize:'12px',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
					fontSize:'10px',
			    color: '#606266',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" :list="tabs" @click="tabClick"></u-tabs>
			<view class="ltr">
				<u-search @search="searchByPhone" :placeholder="$t('请输入手机号')" :showAction="false"
					:clearabled="true"></u-search>
			</view>

			<u-cell-group>
				<u-cell :url="'./show?id='+item.id" v-for="(item,index) in datalist" isLink>

					<view slot="icon">
						<u-avatar v-if="item.avatar" fontSize="12" :random-bg-color="true" :src="item.avatar"
							randomBgColor>
						</u-avatar>
						<u-avatar v-else fontSize="12" icon="camera" randomBgColor>
						</u-avatar>
					</view>

					<view slot="title">
						<view class="pd-left-5 pd-right-5 font-bold ma">
							{{item.authName?item.authName:(item.nickname?item.nickname:item.phone)}}
						</view>
					</view>
					<view slot="value">
						<u--text type="info" size="10" :text="item.agentName"></u--text>

					</view>
				</u-cell>

			</u-cell-group>
		</view>
	</b-layout-index>
</template>

<script>
	import {
		getFindByMiniAdminList
	} from "../../../../api/agent";
	import {
		findByPageMiniList
	} from "@/api/user.js";
	export default {
		data() {
			return {
				datalist: [],
				page: 0,
				phone: "",
				tabs: [],
				tab: 0
			}
		},
		onLoad: function() {
			this.getFindByMiniListAgent()


		},
		onReachBottom: function() {
			var page = this.page;
			if (page > -1) {
				page++;
				this.page = page;
				this.fetchByDataList()
			}
			console.log("onReachBottom")
		},
		methods: {
			searchByPhone: function(e) {
				console.log(e)
				this.page = 0;
				this.datalist = []
				this.fetchByDataList(e)
			},
			fetchByDataList: function(value = "") {
				var datalist = this.datalist;


				findByPageMiniList(this.page, value, this.tab).then(res => {

					if (res.length < 10) {
						this.page = -1
					}
					datalist = datalist.concat(res)
					this.datalist = datalist
				})
			},
			getFindByMiniListAgent: function() {
				//getFindByMiniList
				var the = this;
				getFindByMiniAdminList().then((res) => {
					console.log(res)
					the.tabs = res;
					the.tab = res[0]['id'];
					the.fetchByDataList();
				})
			},
			tabClick: function( item) {
				console.log(item)
				this.page = 0;
				this.datalist = []
				this.tab = item.id;
				this.fetchByDataList()
			}
		}
	}
</script>

<style>

</style>